import {AfterViewInit, Component, ElementRef, QueryList, ViewChild, ViewChildren} from '@angular/core';
import {ViewChildComponent} from "./view-child/view-child.component";
import {ContentChildComponent} from "./content-child/content-child.component";

@Component({
  selector: 'app-sunshine-lifecycle',
  standalone: true,
  imports: [ViewChildComponent,ContentChildComponent],
  templateUrl: './sunshine-lifecycle.component.html',
  styleUrl: './sunshine-lifecycle.component.css'
})
export class SunshineLifecycleComponent implements  AfterViewInit{
// 方法1: 引入PanelComponent组件，ViewChild直接获取PanelComponent
  @ViewChild(ViewChildComponent, {static: true}) private panelInstance!: ViewChildComponent;

  // 方法2: 引入PanelComponent组件，ViewChild直接获取PanelComponent
  @ViewChild('childComponent2', {static: true}) private panelInstance2!: ViewChildComponent;

  // 定义私有属性boxEls，是ElementRef组成的QueryList类型。
  @ViewChildren('boxn') private boxEls!: QueryList<ElementRef>;

  ngAfterViewInit(): void {
    // 既然是组件的实例，那么，我们就能访问组件里面的属性及方法
    console.log("获取子组件（指令）",this.panelInstance.name); // panel component
    console.log(this.panelInstance2.name); // panel component

    console.log("获取组件中的DOM元素",this.panelInstance.el.nativeElement)

    console.log(this.boxEls);

    this.boxEls.forEach((item, index) => {
      console.log("index = ", index)
      console.log(item.nativeElement.innerHTML)
    })
  }
}
